<template>
  <el-space fill :size="20" style="width: 100%">
    <el-card class="app-page" shadow="never" header="快捷操作">
      <el-space v-for="o in shorts" :key="o.path" class="short-item" :size="30">
        <router-link :to="o.path" class="text-sm">
          <el-icon class="mr-1">
            <component :is="customIcons[o.icon]" />
          </el-icon>
          <span class="lab">{{ o.label }}</span>
        </router-link>
      </el-space>
    </el-card>
    <el-card class="app-page" shadow="never" header="技术栈">
      <el-descriptions :column="4">
        <el-descriptions-item>
          <a href="https://cn.vitejs.dev/" target="_blank">Vite文档</a>
        </el-descriptions-item>
        <el-descriptions-item>
          <a href="https://cn.vuejs.org/guide/introduction.html" target="_blank">Vue3文档</a>
        </el-descriptions-item>
        <el-descriptions-item>
          <a href="https://pinia.vuejs.org/zh/" target="_blank">Pinia</a>
        </el-descriptions-item>
        <el-descriptions-item>
          <a href="https://element-plus.gitee.io/zh-CN/component/button.html" target="_blank">Element-plus文档</a>
        </el-descriptions-item>
        <el-descriptions-item>
          <a href="https://www.expressjs.com.cn/starter/installing.html" target="_blank">Express文档</a>
        </el-descriptions-item>
        <el-descriptions-item>
          <a href="https://docs.oracle.com/en-us/iaas/mysql-database/doc/getting-started.html" target="_blank">Mysql文档</a>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="app-page" shadow="never" header="使用帮助">
      <el-descriptions>
        <el-descriptions-item label="Vue群">
          <el-tag size="small">364912432</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="Node群">
          <el-tag size="small">422910907</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="API文档">
          <a href="https://apifox.com/apidoc/shared-94258148-561b-4bf5-b77b-d4aea7200262" target="_blank">接口文档</a>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </el-space>
</template>
<script setup lang="ts">
import * as Icons from '@element-plus/icons-vue'

const customIcons: { [key: string]: any } = Icons
const shorts = [
  {
    icon: 'DocumentAdd',
    path: '/new',
    label: '新增文章',
  },
  {
    icon: 'FolderAdd',
    path: '/new',
    label: '新增分类',
  },
  {
    icon: 'Picture',
    path: '/new',
    label: '新增Banner',
  },
]
</script>
